<template>
  <div>
    <el-card v-if="showCardParam.isHeader" class="header-box-card" shadow="never">
      <div slot="header">
        <div class="page-header">
          <div class="page-header-content">
            <span class="title">{{ showCardParam.cardTitle }}</span>
          </div>
          <el-button size="small" @click="changeForm">编 辑</el-button>
        </div>
      </div>
      <div class="page-container-main">
        <div class="page-container-content">
          <template v-for="formField in showCardParam.headerColumns">
            <div class="item">
              <span>{{formField.chineseName}}:        </span>
              <span v-if="formField.columnType === 'INPUT'" class="value">{{ formField.format?formField.format(form[formField.columnName]):form[formField.columnName]}}<span>{{formField.unit ? formField.unit:''}}</span></span>
              <span v-if="formField.columnType === 'SELECT'" class="value">{{ dictLabelFormat(formField.dict, form[formField.columnName]) }}</span>
              <span v-if="formField.columnType === 'DATE'" class="value">{{ parseFormatTime(form[formField.columnName], formField.dateFormat) }}</span>
              <span v-if="formField.columnType === 'DATERANGE'" class="value">{{form[formField.columnName][0] + '至' + form[formField.columnName][1]}}</span>
            </div>
          </template>
        </div>
      </div>
    </el-card>
    <el-card v-else class="box-card rate-card" shadow="never">
      <div slot="header" class="card-header">
        <span class="card-head-title">{{showCardParam.cardTitle}}</span>
        <span>
          <el-button v-if="toggleButton.altering" size="small" @click="cancel()">取消</el-button>
          <el-button :type="toggleButton.altering ? 'primary' : ''" size="small" @click="toggle">{{toggleButton.text}}
          </el-button>
        </span>
      </div>
      <div class="card-body">
        <el-form :key="formDataStatus" ref="form" :model="form" :rules="showCardParam.showCardRules" style="padding: 0 24px">
          <template v-for="showFormParam in showCardParam.formList">
            <form-block-title :title="showFormParam.formTitle"/>
            <el-row :gutter="48">
              <template v-for="(formField) in showFormParam.showFormFieldList">
                <el-col v-if="formField.columnType === 'SELECT'" :xl="formField.xl" :md="formField.xl" :sm="formField.sm" :xs="formField.xs">
                  <el-form-item :label="formField.chineseName" :prop="formField.columnName">
                    <el-select v-if="toggleButton.altering" size="small"  v-model="form[formField.columnName]" placeholder="请选择" style="width: 100%">
                      <el-option v-for="item in getDict(formField.dict)" :key="item.dictValue"
                                 :label="item.dictLabel"
                                 :value="item.dictValue"
                      ></el-option>
                    </el-select>
                    <span v-if="!toggleButton.altering">{{ dictLabelFormat(formField.dict, form[formField.columnName]) }}</span>
                  </el-form-item>
                </el-col>
                <el-col v-if="formField.columnType === 'INPUT'" :xl="formField.xl" :md="formField.xl" :sm="formField.sm" :xs="formField.xs">
                  <el-form-item
                    :label="formField.chineseName" :prop="formField.columnName"
                  >
                    <el-input size="small" v-if="toggleButton.altering" style="width: 100%" v-model="form[formField.columnName]" :placeholder="'请输入'+formField.chineseName"
                    >
                      <template slot="append" v-if="formField.unit">{{formField.unit}}</template>
                    </el-input>
                    <span v-if="!toggleButton.altering">{{ formField.format?formField.format(form[formField.columnName]):form[formField.columnName]}}<span>{{formField.unit ? formField.unit:''}}</span></span>
                  </el-form-item>
                </el-col>
                <el-col v-if="formField.columnType === 'DATE'" :xl="formField.xl" :md="formField.xl" :sm="formField.sm" :xs="formField.xs">
                  <el-form-item :label="formField.chineseName" :prop="formField.columnName"
                  >
                    <el-date-picker v-if="toggleButton.altering" size="small" v-model="form[formField.columnName]" :picker-options="pickerOptions"
                                    placeholder="请选择时间" style="width: 100%" type="date"
                    ></el-date-picker>
                    <span v-if="!toggleButton.altering">{{ parseFormatTime(form[formField.columnName], formField.dateFormat) }}</span>
                  </el-form-item>
                </el-col>
                <el-col v-if="formField.columnType === 'DATETIME'" :xl="formField.xl" :md="formField.xl" :sm="formField.sm" :xs="formField.xs">
                  <el-form-item>
                    <el-date-picker  v-if="toggleButton.altering" v-model="form[formField.columnName]" placeholder="请选择日期"
                                     size="small"
                                     style="width:100%" type="month" value-format="yyyy-MM" :picker-options="daterangeOptions"
                    />
                  </el-form-item>
                  <span v-if="!toggleButton.altering">{{ parseFormatTime(form[formField.columnName], formField.dateFormat) }}</span>
                </el-col>
                <el-col v-if="formField.columnType === 'DATERANGE'" :xl="formField.xl" :md="formField.xl" :sm="formField.sm" :xs="formField.xs">
                  <el-form-item>
                    <el-date-picker
                      v-if="toggleButton.altering"
                      v-model="form[formField.columnName]"
                      type="daterange"
                      size="small"
                      style="width: 100%"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      value-format="yyyy-MM-dd"
                    >
                    </el-date-picker>
                    <span v-if="!toggleButton.altering">{{form[formField.columnName][0] + '至' + form[formField.columnName][1]}}</span>
                  </el-form-item>
                </el-col>
              </template>
            </el-row>
          </template>
        </el-form>
      </div>
    </el-card>
  </div>
</template>
<script>
import FormBlockTitle from '@/components/ScFormBlockTitle/index'
import {parseTime} from "@/utils/ruoyi";

export default {
  name: 'DrShowCard',
  components: { FormBlockTitle },
  props:{
    showCardParam:{
      type: Object,
      default: null
    }
  },
  data() {
    return {
      form:{
        name: 'ddds'
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7
        }
      },
      daterangeOptions:{
        disabledDate (time) {
          // 禁用以后的时间
          return time.getTime() > Date.now() - 8.64e6
        },
      },
      dictOptionsMap:{},
      formType : 'edit',
      toggleButton: {
        altering: false,
        text: '编 辑'
      },
      formDataStatus: false
    }
  },
  created() {
    for(let i in this.showCardParam.headerColumns) {
      if(this.showCardParam.headerColumns[i].columnType === 'SELECT') {
        if(!this.dictOptionsMap[this.showCardParam.headerColumns[i].dict]){
          this.getDicts(this.showCardParam.headerColumns[i].dict).then(response => {
            this.dictOptionsMap[this.showCardParam.headerColumns[i].dict] = response.data
          })
        }
      }
    }
    for(let i in this.showCardParam.formList) {
      for(let j in this.showCardParam.formList[i].showFormFieldList)
      if(this.showCardParam.formList[i].showFormFieldList[j].columnType === 'SELECT') {
        if(!this.dictOptionsMap[this.showCardParam.formList[i].showFormFieldList[j].dict]){
          this.getDicts(this.showCardParam.formList[i].showFormFieldList[j].dict).then(response => {
            this.dictOptionsMap[this.showCardParam.formList[i].showFormFieldList[j].dict] = response.data
          })
        }
      }
    }
  },
  methods: {
    changeForm() {
      this.$emit("changeForm",this.form)
    },
    toggle() {
      if(this.toggleButton.altering){
        this.$refs['form'].validate((valid) => {
          if(valid){ //保存触发
            if (this.formType === 'edit') {
              this.$emit('saveEdit',this.form)
            }else{
              this.$emit('saveAdd',this.form)
            }
          }
        })
      }else {    //编辑触发
        this.toggleButton.altering = true
        this.toggleButton.text = '保 存'
      }
    },
    getDict(dictName){
      if(this.dictOptionsMap[dictName]) {
        return this.dictOptionsMap[dictName];
      }
      this.getDicts(dictName).then((response) => {
        this.dictOptionsMap[dictName] = response.data
        return this.dictOptionsMap[dictName];
      })
    },
    // 取消按钮
    cancel() {
      //this.reset()
      this.$emit('reload');
      this.toggleButton.altering = false
      this.toggleButton.text = '编 辑'
    },
    dictLabelFormat(options, selectedValue) {
      if(!selectedValue) return ''
      if(this.dictOptionsMap[options]) {
        return this.selectDictLabel(this.dictOptionsMap[options], selectedValue)
      }
    },
    parseFormatTime(data, format) {
      return parseTime(data, format)
    },
    // 表单重置
    reset() {
      this.form = {}
    },
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.formType === 'edit') {
            this.$emit('saveEdit',this.form)
          }else{
            this.$emit('saveAdd',this.form)
          }
        }
      })
    }
  }
}
</script>

<style lang="scss">
@import "~@/assets/styles/page-detail.scss";
</style>
<style lang="scss" scoped>
@import "~@/assets/styles/page-detail-scoped.scss";
</style>
